<template>
  <div class="tingdian">
    <div class="flex location-wrap">
      <span class="white" style="font-size: 16px;">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/EDManagement' }">应急处置</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/home' }">客户服务</el-breadcrumb-item>
        <el-breadcrumb-item>停电信息发布</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="box">
      <filterTitle @query="query" @reset="Reset" :form="form" :formData="formData" :labelWidth="'210px'">
      </filterTitle>
      <!-- 台区数据 -->
      <LsdTable slot="tqtd" :compRef="table.compRef" ref="tqtd" :columns="table.columns" :title="table.title"
        :actions="table.actions" :tableData="table.tableData" :tableAttr="table.tableAttr" :isShowPage="table.isShowPage"
        :isSelectFlag="table.isSelectFlag" :isSequenceFlag="table.isSequenceFlag" @onActionClick="onActionClick"
        @pageChange="handleSizeChange" />
      <div style="margin-top:10px">总计：{{ table.tableData.length }}条</div>
      <!-- 重要用户数据 -->
      <LsdTable slot="zyyhtd" :compRef="table1.compRef" ref="zyyhtd" :columns="table1.columns" :title="table1.title"
        :actions="table1.actions" :tableData="table1.tableData" :tableAttr="table1.tableAttr"
        :isShowPage="table1.isShowPage" :isSelectFlag="table1.isSelectFlag" :isSequenceFlag="table1.isSequenceFlag" />
      <div style="margin-top:10px">总计：{{ table1.tableData.length }}条</div>
      <!-- 用户停电信息 -->
      <LsdTable slot="yhtd" :compRef="table2.compRef" ref="yhtd" :columns="table2.columns" :title="table2.title"
        :actions="table2.actions" :tableData="table2.tableData" :tableAttr="table2.tableAttr"
        :isShowPage="table2.isShowPage" :isSelectFlag="table2.isSelectFlag" :isSequenceFlag="table2.isSequenceFlag" />
    </div>
    <submitted :dialogVisible.sync="dialogVisible" @list="list"></submitted>
  </div>
</template>

<script>
import submitted from "./components/Submitted.vue";
import { getDictByGroupEmergency } from "@/api/common";
import { getListApi } from "@/api/EmergencyDisposal/tdxxfb.js";
import { getpublishedinfo } from "@/api/EmergencyDisposal/xymld.js";
export default {
  name: "",
  components: { submitted },
  data() {
    return {
      // 筛选表单
      formData: [
        {
          elType: "select",
          id: "responseId",
          label: "响应命令单",
          attrs: {
            value: "",
            size: "small",
            filterable: true,
            "collapse-tags": true,
            clearable: true
          },
          options: []
        },
        {
          elType: "select",
          id: "recoverState",
          label: "复电状态",
          dic: "dic_fdzt",
          attrs: {
            value: "",
            size: "small",
            // clearable: true,
            filterable: true,
            "collapse-tags": true
          },
          options: []
        }
      ],
      // 表格信息
      table2: {
        isSelectFlag: false, // 是否展示选择器
        compRef: "yhtd",
        isSequenceFlag: true, // 是否展示序号
        isShowPage: false, // 是否展示分页
        resetFlag: true,
        loading: false,
        title: "用户停电信息",
        actions: [],
        tableData: [],
        columns: [
          {
            prop: "responseName",
            label: "响应命令单",
            align: "left",
            "width": "287px",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span
                      class='commonTableStyle'
                      style='width: 100%;'
                      {...{
                        on: {
                          click: () => {
                            this.operinfo(row.responseId);
                          }
                        }
                      }}
                    >
                      {row.responseName}
                    </span>
                  }
                </div>
              );
            }
          },
          {
            prop: "blackoutCount",
            label: "停电数量",
            align: "center"
          },
          {
            prop: "recoverCount",
            label: "恢复供电数量",
            align: "center"
          },
          {
            prop: "modifyTime",
            label: "更新时间",
            align: "center"
          },
          {
            prop: "recoverRatio",
            label: "恢复率",
            align: "center"
          }
        ],
        // 表格样式
        tableAttr: {
          "max-height": "313px",
          // height: "103px",
          // height: "313px",
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            "font-size": "16px"
          }
        }
      },
      // 表格信息
      table1: {
        isSelectFlag: false, // 是否展示选择器
        compRef: "zyyhtd",
        isSequenceFlag: true, // 是否展示序号
        isShowPage: false, // 是否展示分页
        resetFlag: true,
        loading: false,
        title: "重要用户停电信息",
        length: "6",
        actions: [],
        tableData: [],
        columns: [
          {
            prop: "responseName",
            label: "响应命令单",
            align: "left",
            "width": "287px",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span
                      class='commonTableStyle'
                      style='width: 100%;'
                      {...{
                        on: {
                          click: () => {
                            this.operinfo(row.responseId);
                          }
                        }
                      }}
                    >
                      {row.responseName}
                    </span>
                  }
                </div>
              );
            }
          },
          {
            prop: "responseLvName",
            label: "响应级别",
            align: "center",
            width: "88px"
          },
          {
            prop: "effectRange",
            label: "影响范围",
            align: "center"
          },
          {
            prop: "effectTime",
            label: "影响时间",
            align: "left",
            "width": "170px"
          },
          {
            prop: "location",
            label: "停电范围",
            align: "left",
            "width": "550px"
          },
          {
            prop: "blackoutTime",
            label: "停电时间",
            align: "center",
            "width": "180px"
          },
          {
            prop: "recoverTime",
            label: "复电时间",
            align: "center",
            "width": "180px"
          },
          {
            prop: "recoverState",
            label: "复电状态",
            align: "center",
            "width": "100px",
            formatter: (row, column, cellValue, index) => {
              if (cellValue == "0") {
                return "未复电";
              } else if (cellValue == "1") {
                return "已复电";
              }
            }
          }
        ],
        // 表格样式
        tableAttr: {
          "max-height": "313px",
          // height: "290px",
          // height: "313px",
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            "font-size": "16px"
          }
        }
      },
      // 表格信息
      table: {
        isSelectFlag: false, // 是否展示选择器
        compRef: "tqtd",
        isSequenceFlag: true, // 是否展示序号
        isShowPage: false, // 是否展示分页
        resetFlag: true,
        loading: false,
        title: "台区停电信息",
        length: "6",
        actions: [
          {
            id: "Submitted",
            text: "报送",
            type: "primary",
            btnAttr: { size: "small" }
          }
        ],
        tableData: [],
        columns: [
          {
            prop: "responseName",
            label: "响应命令单",
            align: "left",
            "width": "287px",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span
                      class='commonTableStyle'
                      style='width: 100%;'
                      {...{
                        on: {
                          click: () => {
                            this.operinfo(row.responseId);
                          }
                        }
                      }}
                    >
                      {row.responseName}
                    </span>
                  }
                </div>
              );
            }
          },
          {
            prop: "lineName",
            label: "停运台区名称",
            align: "center"
          },
          {
            prop: "unitName",
            label: "所属单位",
            align: "center"
          },
          {
            prop: "location",
            label: "位置",
            align: "left",
            width: "380px"
          },
          {
            prop: "blackoutTime",
            label: "停电时间",
            align: "center",
            "width": "180px"
          },
          {
            prop: "recoverTime",
            label: "复电时间",
            align: "center",
            "width": "180px"
          },
          {
            prop: "recoverState",
            label: "复电状态",
            align: "center",
            "width": "110px",
            formatter: (row, column, cellValue, index) => {
              if (cellValue == "0") {
                return "未复电";
              } else if (cellValue == "1") {
                return "已复电";
              }
            }
          }
        ],
        // 表格样式
        tableAttr: {
          "max-height": "313px",
          // height: "313px",
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            "font-size": "16px"
          }
        }
      },
      multipleSelection: [],
      total: 6,
      dialogVisible: false,
      pageNum: 1,
      pageSize: 10,
      formInline: {
        xymld: "",
        fdzt: ""
      },
      form: {
        responseId: "",
        recoverState: ""
      },
      tableData: [],
      tableData1: [],
      tableData2: [
        {
          tdsl: "68610",
          hfgdsl: "20950",
          gxsj: "2021-08-12 15:50:00",
          hfl: "30%"
        }
      ],
      // 分页信息
      paginationAtrrs: {
        total: 0,
        "background": true,
        layout: "prev, pager, next",
        "current-page": 1,
        "page-size": 10
        // "page-sizes": [10, 20, 30, 40, 50, 100]
      }
    };
  },
  created() {
    this.getPublishedResponse();
    this.list();
    this.getOptionsByDict();
  },
  mounted() {
    if (JSON.parse(sessionStorage.getItem("role")).roleCode === "hb_spr") {
      this.table.actions = [];
    }
  },
  methods: {
    // 获取已发布的响应命令单
    getPublishedResponse() {
      getpublishedinfo({}).then(res => {
        console.log(res);
        let options = [];
        options = res.map(item => {
          return {
            label: item.responseName,
            value: item.id,
            ...item
          };
        });
        this.formData[0].options = options;
      });
    },
    // 获取筛选项
    getOptionsByDict() {
      this.formData.forEach(item => {
        if (item.dic) {
          getDictByGroupEmergency({ groupCode: item.dic }).then(res => {
            const option = res.map((item) => {
              return {
                label: item.dicName,
                value: Number(item.dicCode)
              };
            });
            item.options = option;
          });
        }
      });
    },
    // 分页
    handleSizeChange(val) {
      this.pageNum = val["current-page"];
      this.pageSize = val["page-size"];
      this.list();
    },
    operinfo(id) {
      // console.log(id)
      this.$router.push({
        name: "EmergencyResponseinfo",
        query: {
          id
        }
      });
    },
    // 抛出列表按钮
    onActionClick(item, index) {
      this[item.id](); // 调用按钮对应方法
    },
    async list() {
      const parmas = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        ...this.form
      };
      const res = await getListApi(parmas);
      console.log(res);
      this.table.tableData = res.tq;
      this.table1.tableData = res.zyyh;
      this.table2.tableData = res.yh;
      // this.paginationAtrrs.total = res.total
    },
    Reset() {
      this.form = this.$options.data().form;
      this.list();
    },
    query() {
      this.list();
    },
    Submitted() {
      this.dialogVisible = true;
    },
    // 分页
    handleCurrentChange(val) {
      this.pageNum = val;
    },
    // 多选单选
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    }
  }
};
</script>

<style scoped lang="less">
@import "../../../assets/style/common.less";
@import "../../../assets/style/ComponentStyle.less";
@import "../../../assets/style/pop-upNotification.less";

:deep(.query .el-form-item:first-child) {
  .el-form-item__label {
    width: 100px !important;
  }

  .el-form-item__content {
    width: 700px;

    .el-select {
      width: 100%;
    }

    .el-input__inner {
      width: 100%;
    }
  }
}

// :deep(.el-table td.el-table__cell) {
//  padding: auto 0;
// }

:deep(.el-breadcrumb__inner.is-link) {
  font-weight: 100;
  color: #fff;
}

:deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: #3270ff;
}

.box {
  // width: 100%;
  // height: 80vh;
  // padding: 0;
  // margin: 0;
  margin-top: 20px;
  max-height: 77vh;
  overflow-y: auto;
  background-color: #fff;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;

  :deep(.el-button) {
    font-size: 16px;
  }
}

:deep(.el-select-dropdown__item) {
  padding: 0 20px !important;
}

:deep(::-webkit-scrollbar-track) {
  background: transparent !important;
}

:deep(.el-dialog__title) {
  font-weight: bold;
}

:deep(.EmergencyList) {
  height: 0%;
  margin: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: 20px;
}
</style>
